<template>
  <div class="B">
    <h3>我是B组件</h3>
    <button @click="changeMsg">change msg</button>
    <p>{{ msg }}</p>
  </div>
</template>

<script setup lang="ts">
import { inject, Ref, ref } from "vue";

// 这样写ts被报错
// let msg = inject("msg");
// const changeMsg = () => {
//   msg.value = "我被改变了";
// };

let msg = inject<Ref<string>>("msg", ref("我是provide传出来的数据"));
const changeMsg = () => {
  msg.value = "我被B改变了";
};
</script>

<style>
.B {
  width: 300px;
  height: 300px;
  background: red;
}
</style>
